<template>
    <div>
        <div style="background-color: #e8f5e8; padding: 15px; margin-bottom: 20px; border-radius: 8px; border-left: 4px solid #4CAF50;">
            <h3 style="color: #2E7D32; margin-top: 0;">🔄 技术解释：响应式数据绑定与计算属性</h3>
            <p><strong>v-model 双向绑定：</strong>实现表单输入与数据的双向同步，当用户输入时自动更新data中的数据，数据变化时也会更新视图。</p>
            <p><strong>计算属性实时更新：</strong>当firstName或lastName发生变化时，fullName计算属性会自动重新计算并更新视图，无需手动触发。</p>
            <p><strong>响应式系统：</strong>Vue的响应式系统会自动追踪依赖关系，确保数据变化时相关的计算属性和视图都能及时更新。</p>
        </div>
        <input v-model="firstName" placeholder="First Name"/>
        <input v-model="lastName" placeholder="Last Name" />
        <p>fullName : {{ fullName }}</p>
    </div>
</template>
<script>
import { computed } from 'vue';

export default{
    data() {
        return {
            firstName : '',
            lastName : ''
        };
    },
    computed:{
        fullName() {
            return `${this.firstName}` + "   "+ `${this.lastName}`;
        }
    }
};

</script>